<template>
  <div class="scoreAward-container">
    <div class="scoreAward-search">
      <span class="page-title">积分奖励列表</span>

      <el-date-picker v-model="scoreAwardTime" type="daterange" range-separator="至"
                      start-placeholder="奖励生成开始日期" end-placeholder="奖励生成结束日期"
                      class="scoreAward-time" value-format="yyyy-MM-dd"></el-date-picker>

      <el-button type="primary" size="small" icon="el-icon-search" @click="searchScoreAward">搜索</el-button>
      <el-button type="info" size="small" class="search-keyword-reset" plain @click="resetSearch">重置</el-button>
    </div>

    <!--积分奖励列表-->
    <div class="scoreAward-table">
      <el-table ref="multipleTable" :data="scoreAwardData" border stripe fit @sort-change='sortChange'
                @filter-change="filterChange"
                v-loading="listLoading" :default-sort="{prop: 'time', order: 'descending'}"
                :row-style="{height:'50px'}" :header-row-style="{height:'40px'}">
        <el-table-column label="ID" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column label="获利人姓名" width="200">
          <template slot-scope="scope">
            <span>{{scope.row.realName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="获利人昵称" width="280">
          <template slot-scope="scope">
            <span>{{scope.row.userName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="获利金额" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.money}}</span>
          </template>
        </el-table-column>
        <el-table-column label="奖励类型" width="120"
                         :filters="[{ text: '完善资料奖励', value: 10 }, { text: '积分兑换奖励', value: 11 }]"
                         :filter-multiple="false" column-key="type"
                         filter-placement="bottom-end">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 10">完善资料奖励</span>
            <span v-if="scope.row.type == 11">积分兑换奖励</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="生成时间" min-width="200" sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.time">{{scope.row.time | formatTime}}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :type="2" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getScoreAwardList" :totalGold="totalGold"/>
    </div>

  </div>
</template>

<script>
  import Pagination from '@/components/Pagination';
  import {permissionPoints} from '@/utils/permission';
  import {formatDate} from "@/utils/index";
  import {getScorePriceList} from "../../../api/finance/finance";

  export default {
    name: "scoreAward",
    components: {
      Pagination
    },
    data() {
      return {
        listLoading: false,
        scoreAwardData: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20,
          startTime: '',
          endTime: '',
          orderBy: 'time asc',
          type: ''
        },
        totalGold: 0,
        scoreAwardTime: [],
      }
    },
    created() {
      this.getScoreAwardList();
    },
    methods: {
      getScoreAwardList() {
        this.listLoading = true;
        getScorePriceList(this.listQuery).then((res) => {
          this.listLoading = false;
          let retObj = res;
          if (retObj.code == 0) {
            const {items, totalRecord, totalMoney} = retObj.data;
            this.total = totalRecord;
            this.scoreAwardData = items;
            this.totalGold = totalMoney;
          }
        }).catch(() => {
          this.listLoading = false;
        })
      },
      searchScoreAward() {//搜索
        this.listQuery.startTime = '';
        this.listQuery.endTime = '';
        if (this.scoreAwardTime && this.scoreAwardTime.length > 0) {
          this.listQuery.startTime = this.scoreAwardTime[0];
          this.listQuery.endTime = this.scoreAwardTime[1];
        }
        this.listQuery.page = 1;
        this.getScoreAwardList();
      },
      resetSearch() {
        this.listQuery.startTime = '';
        this.listQuery.endTime = '';
        this.scoreAwardTime = [];
        this.listQuery.type = '';
        this.$refs.multipleTable.clearFilter();
        this.listQuery.page = 1;
        this.getScoreAwardList();
      },
      filterChange(value) {//过滤
        this.listQuery.type = String(value.type);
        this.listQuery.page = 1;
        this.getScoreAwardList();
      },
      sortChange(column) {//排序
        if (column.prop == "time" && column.order == "ascending") {
          this.listQuery.orderBy = "time asc";
        } else if (column.prop == "time" && column.order == "descending") {
          this.listQuery.orderBy = "time desc";
        }
        this.listQuery.page = 1;
        this.getScoreAwardList();
      }
    },
    filters: {
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      }
    }
  }
</script>

<style lang="scss" scoped>
  .scoreAward-container {
    .scoreAward-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      .page-title {
        padding-left: 20px;
        font-size: 18px;
        font-weight: bold;
        min-width: 160px;
        text-align: left;
        color: rgba(61, 68, 77, 1);
      }
      .search-keyword-reset {
        margin-right: 36px;
      }
      .scoreAward-time {
        margin-right: 20px;
        width: 340px;
      }
    }
    .scoreAward-table {
      width: 98%;
      margin-left: 18px;
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header .has-gutter th {
        padding: 6px 0px;
      }
      > > > .el-table__column-filter-trigger {
        line-height: 28px;
        i {
          font-size: 18px;
        }
      }
      > > > .el-table__row .cell {
        display: flex;
        align-items: center;
      }
      > > > .el-table__header .has-gutter .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
</style>
